<!--
 * @Author: your name
 * @Date: 2021-10-06 21:30:38
 * @LastEditTime: 2021-10-07 19:37:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \common-vue\src\components\mForm\index.vue
-->
<template>
  <div class="index-box">
    <my-form :model="model" :rules="rules" ref="loginForm">
      <my-form-item label="用户名" prop="username">
        <my-input type="text" v-model="model.username" placeholder="请输入名字"/>
      </my-form-item>
      <my-form-item label="密码" prop="password">
        <my-input type="password" v-model="model.password" placeholder="请输入密码"/>
      </my-form-item>
      <!-- 没有prop属性,所有这里是不会校验的 -->
      <my-form-item>
        <button @click="onLogin">登录</button>
      </my-form-item>
    </my-form>
    <!-- {{ mForm.value }} -->
  </div>
</template>

<script>
import MyInput from './MyInput.vue'
import MyFormItem from './MyFormItem.vue'
import MyForm from './MyForm.vue'
// import Notice from '../notice/index.vue'
// import { create } from '@utils/create.js'

export default {
  name: 'index',
  components: {
    MyInput, MyFormItem, MyForm
  },
  data() {
    return {
      model: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: 'username is required' }
        ],
        password: [
          { required: true, message: 'password is required' }
        ]
      }
    }
  },
  methods: {
    onLogin() {
      // this.$refs.loginForm表示MyForm这个组件实例
      this.$refs.loginForm.validate(isValid => {
        this.$notice({
          title: '这是标题',
          message: isValid ? '校验成功' : '校验失败',
          duration: 13000
        })
        // const notice = create(Notice, {
        //   title: '这是标题',
        //   message: isValid ? '校验成功' : '校验失败',
        //   duration: 13000
        // })
        // notice.show()
      })
    }
  }
}
</script>

<style scoped lang="less">

</style>
